<template>
    {{ stock }}
    {{ date }}

    <el-table :data="state.data" 
        :cell-class-name="tableCellClassName"
    style="width: 100%">
        <el-table-column prop="date" label="Date" width="140" />
        <el-table-column prop="day" label="星期" width="80">
            <template #default="scope">
                {{ getDayOfWeek(scope.row.date) }}
            </template> 
        </el-table-column>
        <el-table-column prop="close" label="close" width="80" />
        <el-table-column prop="pct" label="pct" width="80" />
        <el-table-column prop="lp" label="分位点" sortable width="100"/>
        <el-table-column prop="relLp" label="relLp" sortable width="100"/>
        <el-table-column prop="gt300d" label="gt300d" width="80" />
    </el-table>
</template>

<script setup>
import { reactive } from 'vue'  
import { getDailyDataByWeekDate } from '../../service/daily'
import { getDayOfWeek, getLpClassName } from '../../utils/help'

const props = defineProps({
    stock: String,
    date: String
})

const state = reactive({
    data : [],
})

const loadData = () => {
    getDailyDataByWeekDate(props.stock, props.date).then(res => {
        state.data = res.data
        console.log(res.data)
    })
}

loadData()

const tableCellClassName = ({row, column, rowIndex, columnIndex}) => {
    let columnProperty = column.property
    let val = row[columnProperty]
    if (columnProperty == "lp") {
        return getLpClassName(row.lp)
    }

    if (['pct','gt300d'].includes(columnProperty)) {
        if (val < 0) {
            return 'pctlt0-cell'
        }
    }
}
</script>
